<template>
  <div>sum:{{ sum }}</div>
  <button @click="add">add</button>
</template>
<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue'

const sum = ref(0)
const add = () => {
  sum.value++
}

//生命周期 setup
console.log('创建')

onBeforeMount(() => {
  console.log('挂载前')
})
onMounted(() => {
  console.log('挂载后')
})
onBeforeUpdate(() => {
  console.log('更新前')
})
onUpdated(() => {
  console.log('更新完毕')
})
onBeforeUnmount(() => {
  console.log('卸载前')
})
onUnmounted(() => {
  console.log('卸载完毕')
})
</script>

<style lang="scss" scoped></style>
